<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2023-02-01 09:59:27
 * @LastEditTime: 2023-03-06 14:46:53
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\page\auth\user.vue
-->
<template>
  <el-container class="user">
    <el-aside class="user-dep">
      <z-button icon="xinzeng" @click="onDep()" class="mb-10" v-if="purview(2)">新增分类</z-button>
      <el-tree highlight-current :data="deps.options" default-expand-all :expand-on-click-node="false">
        <template #default="{ node, data }">
          <p class="dis-flex flex-x-between w-100">
            <span>{{ node.label }}</span>
            <span v-if="data.value">
              <el-button type="primary" link @click="onDep(data)" v-if="purview(3)">修改</el-button>
              <el-button type="danger" link @click="onDepDel(data)" v-if="purview(4)">删除</el-button>
            </span>
          </p>
        </template>
      </el-tree>
    </el-aside>
    <el-main class="user-main flexible">
      <ul class="header-buttons">
        <li>
          <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
          <z-button icon="add" @click="onAdd" v-if="purview(2)">新增</z-button>
        </li>
        <li class="dis-flex">
          <p class="mr-10">
            <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称/手机号模糊搜索" clearable></el-input>
          </p>
          <el-button-group class="ml-4">
            <columnSetting v-model="table.columns" name="User/GetPage" />
            <el-button>
              <el-icon> <IEpSearch /> </el-icon>
            </el-button>
          </el-button-group>
        </li>
      </ul>
      <el-table :data="table.data" border stripe ref="tableRef" class="flexible-table">
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column v-for="(item, index) in table.columns.filter(r => r.show)" :prop="item.id" :label="item.label" :key="item.id + index" align="center">
          <template #default="scope">
            <template v-if="item.id === 'operate'">
              <z-button icon="xiugai" size="small" title="编辑" @click="onEdit(scope.row)" v-if="purview(3)"></z-button>
            </template>
            <template v-if="item.id === 'statusId'">
              <el-switch
                v-model="scope.row[item.id]"
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                @change="onStatusChange(scope.row)"
              >
              </el-switch>
            </template>
            <template v-else>
              {{ scope.row[item.id] }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="flexible-pagination">
        <el-pagination
          v-model:current-page="params.pageIndex"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 30, 60, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.totalCount"
          @size-change="handleSizeChange"
          @current-change="pageQuery"
        />
      </div>
    </el-main>
    <userEdit v-model="status.show" :depOptions="deps.options" :editData="status.editData" @onSave="onUserCallback" />
    <depEdit v-model="deps.depShow" v-model:depOptions="deps.editOptions" v-model:editData="deps.editData" @onSave="onDepCallback" />
  </el-container>
</template>
<script setup>
import { post } from '@/api/index';
import userEdit from './components/userEdit.vue';
import depEdit from './components/depEdit.vue';
let { dataProcess, purview } = inject('$global');
let $message = inject('$message');

/**
 * @description: 下面处理部门数据
 */
let deps = reactive({
  initialOptions: [],
  options: [],
  editOptions: [],
  editData: {},
  depShow: false
});

// 获取部门数据
const getDep = async () => {
  let { result } = await post('DeptMent/GetSelectPage', {
    pageIndex: 1,
    pageSize: 999
  });
  let arr = result.items.map(r => {
    return {
      ...r,
      ...{
        label: r.deptMentName,
        value: r.id
      }
    };
  });
  deps.initialOptions = arr;
  deps.options = dataProcess(arr, 'deptParentId');
};
// 部门新增/修改
const onDep = (val = {}) => {
  deps.editOptions = dataProcess(
    deps.initialOptions.filter(r => r.id !== val.id),
    'deptParentId'
  );
  deps.editData = val;
  deps.depShow = true;
};

// 新增修改部门回调
const onDepCallback = () => {
  deps.depShow = false;
  getDep();
};
getDep();

/**
 * @description: 下面员工部分代码
 */
let tableRef = ref();
let table = reactive({
  columns: [
    { label: '名称', id: 'userName', show: true },
    { label: '角色名称', id: 'roleName', show: true },
    { label: '手机号', id: 'phone', show: true },
    { label: '状态', id: 'statusId', show: true },
    { label: '操作', id: 'operate', show: true }
  ],
  data: [],
  totalCount: 0
});
let status = reactive({
  show: false,
  editData: {}
});
let params = reactive({
  pageIndex: 1,
  pageSize: 30,
  keyword: ''
});
const onAdd = () => {
  status.editData = {};
  status.show = true;
};
const onEdit = val => {
  status.editData = val;
  status.show = true;
};
const onDel = async val => {
  await post('Role/BulkDelete', { ids: val });
  $message.success('删除成功');
  pageQuery();
};
// 查询列表接口
const pageQuery = async () => {
  let { result } = await post('User/GetPage', params);
  if (result.columnJson) table.columns = JSON.parse(result.columnJson);
  table.data = result.items;
  table.totalCount = result.totalCount;
};
// 创建 保存 回调
const onUserCallback = () => {
  pageQuery();
  status.show = false;
};
pageQuery();
const onStatusChange = async val => {
  await post('User/UpdateStatusId', { id: val.id, statusId: val.statusId });
  $message.success('修改状态成功!');
};
const handleSizeChange = val => {
  params.pageIndex = 1;
  pageQuery();
};
</script>

<style lang="scss" scoped>
.user {
  height: 100%;
  &-dep {
    background-color: #fff;
    padding: 10px;
  }
  .header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  &-main {
    background-color: #fff;
    padding: 10px;
    margin-left: 10px;
  }
}
</style>
